@require "../../css/variables.styl"
@require "../../css/mixin.styl"

.va-df-form
  text-align left
  padding 10px

  p
    margin 0
    padding 0

  label
    font-weight normal
    margin 0

for i in 0..10
  $_width = i * 10 + 10 + 30
  .va-df-form-horizontal-{$_width - 10}
    .va-df-form-group
      display flex
      >label
        width unit($_width, px)
        text-align right
        padding 0 10px 0 0
        display flex
        flex-direction column
        justify-content center
      >.va-df-input-wrapper
        flex 1
        min-width 0
        width 100%
    &.va-df-form-inline
      .va-df-form-group
        display inline-flex
        .va-df-input-wrapper
          min-width 120px

df-form-grid-n($columns = 2)
  $_width = 100% / $columns
  display: flex
  flex-flow: row wrap
  > .va-df-complex-form-group, > .va-df-form-group, > .va-df-button-wrapper
    flex-grow: 0
    flex-shrink: 0
    width: $_width
    for i in 1..$columns
      &:nth-child(n + {i})
        padding-right 5px

for i in 2..5
  .va-df-form-grid-{i}
    df-form-grid-n(i)

.va-df-form-inline
  line-height 0
  .va-df-repeat-item-wrapper
    display inline
